<template>
  <div class="JmForm">
    <h1><span> 建议/反馈</span></h1>
    <div class="form-box">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="主题">
          <el-input v-model="formLabelAlign.main"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="所在区域">
          <!-- npm install element-china-area-data -S   使用这个命令安装   在引入-->
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formLabelAlign.phone"></el-input>
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="formLabelAlign.email"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="formLabelAlign.content"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="btnAreas">
      <el-button @click="backHandle">返回</el-button>
      <el-button @click="backHandle">提交</el-button>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  //import引入的组件
  components: {},
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        main: "",
        name: "",
        phone: "",
        email: "",
        content: "",
      },
      options: regionData,
      selectedOptions: [],
    };
  },
  //方法集合
  methods: {
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      console.log(loc, "选择的区域");
    },
    backHandle() {
      this.$router.back();
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
.JmForm {
  height: 80vh;
  background-image: url("../assets/product-red/zsjm.jpg");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 30px;
  cursor: pointer;
  h1 {
    font-size: 36px;
    color: #a8845c;
    position: relative;
    margin-bottom: 10px;
    & > span {
      &:before {
        content: "";
        position: absolute;
        left: 44%;
        top: -10px;
        width: 32px;
        height: 32px;
        background: url("../assets/product-red/t1.png") no-repeat;
        background-size: cover;
      }
      &::after {
        content: "";
        position: absolute;
        left: 54%;
        bottom: -20px;
        width: 32px;
        height: 32px;
        background: url("../assets/product-red/t2.png") no-repeat;
        background-size: cover;
      }
    }
  }
  // 加盟申请表
  .form-box {
    margin: 0 auto;
    // border: 1px solid red;
    width: 55vw;
    height: 45vh;
    overflow: scroll;
    margin-top: 50px;
    ::v-deep.el-form-item__label {
      color: white !important;
    }
    ::v-deep.el-form-item__content {
      width: 50vw;
    }
    ::v-deep.el-input__inner {
      width: 50vw;
    }
  }

  .btnAreas {
    margin-top: 50px;
  }
}
</style>
